<template>
  <div class="scene-container">
    <div class="scene-list">
      <div
        v-for="(item, index) in sceneList"
        :key="index"
        @click="selectScene(item, index)"
        :class="{ 'scene-list-item-select': item.scene_id == sceneSelectId }"
        class="scene-list-item"
      >
        {{ item.name }}
      </div>
    </div>
    <div>
      <flexbox class="handle-button" @click.native="addScene">
        <img class="handle-button-icon" src="@/assets/img/scene_add.png" />
        <div class="handle-button-name">新建场景</div>
      </flexbox>
      <flexbox class="handle-button" @click.native="setScene">
        <img class="handle-button-icon" src="@/assets/img/scene_set.png" />
        <div class="handle-button-name">管理</div>
      </flexbox>
    </div>
  </div>
</template>

<script type="text/javascript">
import { mapGetters } from "vuex";
import {
  filterIndexfields,
  crmSceneIndex
} from "@/api/customermanagement/common";

export default {
  name: "scene-list", //客户管理下 重要提醒 回款计划提醒
  components: {},
  computed: {
    ...mapGetters(["crm"])
  },
  data() {
    return {
      // 场景列表
      sceneSelectId: -1,
      sceneList: []
    };
  },
  watch: {},
  props: {
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: ""
    }
  },
  mounted() {
    if (this.crm[this.crmType].index) {
      this.getSceneList();
    }
  },
  methods: {
    getSceneList() {
      console.log("list22");
      crmSceneIndex({
        types: "crm_" + this.crmType
      })
        .then(res => {
          let defaultScenes = res.data.list.filter(function(item, index) {
            return item.is_default === 1;
          });

          if (defaultScenes && defaultScenes.length > 0) {
            let defaultScene = defaultScenes[0];
            this.sceneSelectId = defaultScene.scene_id;
            this.$emit("scene", {
              id: defaultScene.scene_id,
              name: defaultScene.name,
              bydata: defaultScene.bydata || ""
            });
          } else {
            this.sceneSelectId = "";
            this.$emit("scene", { id: "", name: "", bydata: "" });
          }

          this.sceneList = res.data.list;
        })
        .catch(() => {
          this.$emit("scene", { id: "", name: "", bydata: "" });
        });
    },

    // 选择场景、
    selectScene(item, index) {
      this.sceneSelectId = item.scene_id;
      this.$emit("scene", {
        id: item.scene_id,
        name: item.name,
        bydata: item.bydata
      });
      this.$emit("hidden-scene");
    },
    // 添加场景
    addScene() {
      this.$emit("scene-handle", { type: "add" });
    },
    // 设置场景
    setScene() {
      this.$emit("scene-handle", { type: "set" });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.scene-container {
  position: relative;
  width: 150px;
}

.scene-list {
  max-height: 240px;
  overflow-y: auto;
  font-size: 12px;
  .scene-list-item {
    color: #333;
    padding: 10px 15px;
    cursor: pointer;
    background-color: white;
  }
  .scene-list-item:hover {
    background-color: #f7f8fa;
    color: $xr-color-primary;
  }

  .scene-list-item-select {
    color: $xr-color-primary;
    background-color: #f7f8fa;
  }
}

.handle-button {
  padding: 10px 20px;
  cursor: pointer;
  .handle-button-icon {
    display: block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
  }
  .handle-button-name {
    font-size: 12px;
  }
}
.handle-button:hover {
  color: $xr-color-primary;
}
</style>
